<template>
  <view class="authorise_wrap">
    <!-- 轮播图 开始 -->
    <view class="authorise_swiper">
      <swiper indicator-dots>
        <swiper-item v-for="item in info" :key="item.content">
          <image :src="item.url" mode="aspectFit" />
          <button
            class="authorize"
            type="primary"
            size="mini"
            @tap="modalTap"
            v-if="item.content == 3"
          >授权</button>
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播图 结束 -->
    <!-- 授权提示框开始 -->
    <modal v-if="ishow"></modal>
    <!-- 授权提示框结束 -->
  </view>
</template>

<script>
// 模态框
import modal from "./auth_modal/index";
export default {
  components: {
    modal
  },
  onLoad() {
  },
  data() {
    return {
      // 轮播图数据
      info: [
        {
          // url: "https://ww1.yunjiexi.club/2020/03/21/bW0EL.png",
          url: "https://ww1.yunjiexi.club/2020/04/27/JqtCb.png",
          content: "1"
        },
        {
          // url: "https://ww1.yunjiexi.club/2020/03/21/bPi3b.png",
          url: "https://ww1.yunjiexi.club/2020/03/21/bPi3b.png",
          content: "2"
        },
        {
          // url: "https://ww1.yunjiexi.club/2020/03/21/bPx79.png",
          url: "https://ww1.yunjiexi.club/2020/03/21/bPx79.png",
          content: "3"
        }
      ],
      //   授权提示框显示隐藏
      ishow: false
    };
  },
  methods: {
    modalTap() {
      uni.showToast({
        title:'请仔细阅读协议，确定是否授权',
        icon:'none'
      })
      this.ishow = true;
    }
  }
};
</script>

<style lang='scss' scoped>
.authorise_wrap {
  height: 100%;
  background-color: #fff;
  // 轮播图
  .authorise_swiper {
    height: 90%;
    position: relative;
    swiper {
      // 750rpx 326.0869565217392
      // height: calc(750rpx / 2.3 );
      height: 100%;
      image {
        height: 100%;
        width: 80%;
        margin: 0 auto;
      }
      button {
        width: 50%;
        position: absolute;
        top: 78%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        border-radius: 100px;
      }
    }
  }
}
</style>